import React, { useState } from 'react'
import './question.less'
import { connect } from 'react-redux'
import { alertDispatch } from '@/utils'
import { sendAnswerApi } from '@/Api'
function Question(props) {
    const [text, setText] = useState('')
    const [isShow,setIsShow] = useState(false)
    // 确认是否作答
    const [isSubmit, setIsSubmit] = useState(false)
    // 提交的方法
    const submitAnswer=()=>{
        if(!text) return props.warning('内容不能为空')
        // 弹框提示提交成功
        props.success('提交成功')
        // 显示出参考答案
        setIsShow(true)
        // 确认提交答案
        setIsSubmit(true)
        // 上传数据至服务器
        sendAnswerApi({
            categoryCode: props.data.categoryCode,
            actionType: "exam_test",
            userAnswer:text,
            actionCode: props.actionCode,
            id: props.data.id
        }).then(res => {
            // console.log(res);
        }).catch(err => {
            console.log(err);
        })
    }
    // 双向绑定文本框内容
    const bindText = (e) =>{
        setText(e.target.value)
    }
    return (
        <div className="question">
            <div className="question-top flex">
                <span>{props.data.zh}</span>
                <p>{props.data.title}</p>
            </div>
            <div className={props?.data.zh==='编程'?"":"hide"} dangerouslySetInnerHTML={{__html:props.data.content}}>
            </div>
            <div className="question-area">
                <textarea value={text} placeholder="请输入答案" onChange={bindText} disabled={isSubmit}></textarea>
            </div>
            <p className="question-desc">此类型的题目暂不支持打分，按正确记分。</p>
            <div className="result">
                <div className="sure-btn" onClick={submitAnswer}>
                    确认
                </div>
                <div className={['answer',isShow? '':'hide'].join(' ')}>
                    <div className="answer-top">
                        <h2>参考答案:</h2>
                    </div>
                    <div className="answer-body" dangerouslySetInnerHTML={{__html:props.data.answer}}>
                    </div>
                </div>
            </div>
        </div>
    )
}
export default connect(null, alertDispatch)(Question)